<template>
  <div class="home">
    <!-- 首页内容 -->
    <!-- 顶部导航开始 -->
    <van-nav-bar fixed>
      <template #left>
        <van-icon
          name="/baking_log/Fj1u8rBVnt5DLwXqhx8QKlRPLoGI.png"
          size="20"
          color="black"
          is-link
          @click="showPopup"
        />
      </template>
      <template #title>
        <router-link to="search">
          <van-search
            :clearable="false"
            left-icon="/baking_log/FltPAS-35CZfvSpnHacXWoqcfFz5.png"
            color="gray"
            style="padding: 0"
            placeholder="搜索食谱/食材,烘焙/家常菜一应俱全"
          />
        </router-link>
      </template>
      <template #right>
        <router-link to="/remind">
          <van-icon
            name="/baking_log/FjmYGE5z6RvQL-_fdLKuSGYfmwO2.png"
            size="20"
            color="black"
          />
        </router-link>
      </template>
    </van-nav-bar>
    <!-- 顶部导航结束 -->
    <!-- 弹出层开始 -->
    <van-popup
      position="bottom"
      :style="{ height: '30%' }"
      v-model="show"
      safe-area-inset-bottom
    >
      <van-grid clickable :column-num="2" :border="false" icon-size="100">
        <van-grid-item
          :icon="require('../assets/baking_log/upload.png')"
          text="上传食谱"
          to="/recipe"
        />
        <van-grid-item
          :icon="require('../assets/baking_log/issue.png')"
          text="发布作品"
          to="/edit"
        />
      </van-grid>
    </van-popup>
    <!-- 弹出层结束 -->
    <!-- 空div解决覆盖问题 -->
    <div style="height: 46px"></div>

    <!-- 轮播图 -->
    <van-swipe
      style="height: 66vw"
      class="my-swipe"
      :autoplay="2000"
      indicator-color="white"
    >
      <van-swipe-item>
        <img src="/baking1/lunbo1.jpeg" style="width: 100%" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="/baking1/lunbo2.jpeg" style="width: 100%" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="/baking1/lunbo3.jpeg" style="width: 100%" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="/baking1/lunbo4.jpeg" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 导航区 -->
    <van-grid>
      <van-grid-item
        to="baike"
        icon="/baking_log/FqTIqQgUiGzbGvFBjYJyJRIvmb7W.png"
        text="技巧百科"
      >
      </van-grid-item>
      <van-grid-item
        to="university"
        icon="/baking_log/FsdwLQX6d3HCUvTO6krgAvL12e5z.png"
        text="视频学堂"
      >
      </van-grid-item>
      <van-grid-item
        to="shopdetail"
        icon="/baking_log/Ftas3mziKsE3fMQvZ3jC4YgDugVk.png"
        text="新手教程"
      >
      </van-grid-item>
      <van-grid-item
        to="classify"
        icon="/baking_log/FqkRcAKpMnFUL3qs1BB9aOhbihlj.png"
        text="食谱分类"
      >
      </van-grid-item>
    </van-grid>
    <!-- 特色推荐结束 -->

    <!-- 可滚动话题开始 -->
    <van-tabs v-model="tab" offset-top="46px" sticky>
      <van-tab v-for="(item, i) in topic" :key="i" :title="item">
        <!-- 作品展示开始 -->
        <div class="recipeitem">
          <recipe-item v-for="i in 10" :key="i"></recipe-item>
        </div>
        <!-- 作品展示结束 -->
      </van-tab>
    </van-tabs>
    <!-- 可滚动话题结束 -->
    <div style="height: 50px"></div>
  </div>
</template>

<script>
import RecipeItem from "../components/RecipeItem.vue";

export default {
  components: { RecipeItem },
  data() {
    return {
      topic: [
        "最新",
        "备战中秋",
        "夏季必做",
        "下午茶",
        "早餐",
        "晚餐",
        "夜宵",
        "颜值控",
        "翻车记",
      ],
      tab: 0,
      active: 0,
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__title) {
  max-width: 76%;
  /* padding-right: 10px; */
}
:deep(.van-search) {
  width: 80vw;
}
:deep(.van-icon__image) {
  margin-top: 4px;
}
:deep(.van-tabs__line) {
  bottom: 20px;
  background-color: #ea9077;
}
.recipeitem {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>
